<template>
    <div class="xing">
      <!-- <div class="rate-item" v-for="(item, index) in count" :key="index" >   -->
      <div class="rate-item" v-for="(star, index) in stars" :key="index" >  
       
        <!-- <img @click="fun(index)" :src="studyDataPic" alt="">  -->
        <img @click="fun(index)" :src="star.src" alt="">      
      </div>
      <div class="ji">
        <span>{{xing}}星</span>
      </div>
    </div>
</template>

<script>
    import starOffImg from "../assets/star.png"
    import starOnImg from "../assets/star-active.png"

    // const CLS_ON = true;
    // const CLS_OFF = false;
    export default {
        name:"Star",
        props: {
         count: {
        //属性值的类型
         type: Number,
        //默认值
         default: 5,
         
       }
      },
     
      data(){
        return{
            // xing : 0
            xing:0,
                
             stars: [{
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        },
                        {
                            src: starOffImg,
                            active: false
                        }, {
                            src: starOffImg,
                            active: false
                        }
                    ],
             

        }
      },
      methods:{
          fun(index){
             let total = this.stars.length; //星星总数
             let idx = index + 1;
             
              if(this.xing == 0) {
                            this.xing = idx;
                            for(var i = 0; i < idx; i++) {
                                this.stars[i].src = starOnImg;
                                this.stars[i].active = true;
                            }
                        } else {
                            //如果再次点击当前选中的星级-仅取消掉当前星级。
                            if(idx == this.xing) {
                                for(var i = 0; i <= index; i++) {
                                    this.stars[i].src = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果小于当前最高星级，则直接保留当前星级
                            if(idx < this.xing) {
                                for(var i = idx; i < this.xing; i++) {
                                    this.stars[i].src = starOffImg;
                                    this.stars[i].active = false;
                                }
                            }
                            //如果大于当前星级，则直接选到该星级
                            if(idx > this.xing) {
                                for(var i = 0; i < idx; i++) {
                                    this.stars[i].src = starOnImg;
                                    this.stars[i].active = true;
                                }
                            }

                            var count = 0; //计数器-统计当前有几颗星
                            for(var i = 0; i < total; i++) {
                                if(this.stars[i].active) {
                                    count++;
                                }
                            }
                            this.xing = count;
                        }
                      

            // let ate = document.querySelectorAll(".rate-item")
            // this.xing = index+1;
            // console.log("点亮了",this.xing,"颗星");
            // let array = [];
            //  for(let i = 0; i < this.xing; i++){
            //     array.push(CLS_ON);
                
            // }
            // while(array.length < 5){ // 到这里还不够五颗星，则凑空星
            //     array.push(CLS_OFF);
            // }
            // console.log(array);
            // for(let j = 0;j < array.length;j++){
            //    if(array[j] == true){
            //    ate[j].style['background-color'] = "#ccc";
            //    ate[j].childNodes.studyDataPic =  require('../assets/star-active.png')
            //    console.log(ate[j].childNodes);
            //   }else{
            //     ate[j].style['background-color'] = "#fff";
            //     // this.studyDataPic =  require("../assets/star.png")
            //   }
            // }
            
            
            
          }
      }
    }
</script>

<style lang="less" scoped>
.xing::after{
    clear: both;
    display: block;
    content: "";
}
.xing{
    display: flex;
}
.rate-item{
    height: 30px;
    float: left;
    flex: 1;
    background-color: #fff;
}
.ji{
    flex: 2;
}
img{
    height: 30px;
}
// img.light{
//     background-image: url(../assets/star.png);
// }
</style>